<template>
  <div id="app">
      <h1 v-color="color">这是第一段</h1><button @click="turnGreen">变绿色</button>
      <h1 v-color="color">这是第二段</h1>
  </div>
</template>

<script>
// import PartOne from './components/partComponent/PartOne.vue';
import Son1 from './components/Son1.vue';
import Son2 from './components/Son2.vue';
export default {
  name: 'App',
  data(){
    return{
      visible:true,
      isEdit:false,
      color:'red'
    }
  },
  directives:{
    "color":{
      inserted(el,binding){
        el.style.color = binding.value
      }
    }
  },

  methods:{
    turnGreen(){
      
    }
  },
  provide(){
    return{
      color:'green12321321'
    }
  },
  components: {
    Son1:Son1,
    Son2:Son2
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
